<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icons/social-icons.html">

<link rel="import" href="shared-styles.html">

<dom-module id="landing-how-it-works"> 
    <template>
        <style include="shared-styles"></style>
        <style>

        paper-material {
            @apply(--shadow-elevation-2dp);
          }

          .section > .hero {
            padding-bottom: 0 !important;
          }

          :host {
            display: block;
          }

          .item {
            display: block;
            text-decoration: none;
          }

          .text-center {
            text-align: center;
          }

          .item:nth-of-type(3),
          .item:nth-of-type(4) {
            display: inline-block;
            width: 50%;
          } 

          .item:nth-of-type(3) > h2,
          .item:nth-of-type(4) > h2 {
            font-size: 1.1em;
          }

          paper-button {
            background-color: var(--app-accent-color);
            color: #fff;
            font-size: 18px;
            height: 54px;
            padding: 0 2rem;
            margin: 40px;
            font-weight: 500;
          }

          a {
            text-decoration: none;
          }

          typed-text {
            display: inline-block;
            font-weight: 500;
          }

          .col {
            display: block;
            float:left;
            width: 50%;
            box-sizing: border-box;
          }

          .pad {
            padding: 16px;
          }

          img.with-shadow {
            max-width: 100%;
            display: block;
          }

          @media only screen and (max-width: 943px) {
            typed-text {
              display: block;
            }
          }

          #placeholder {
              opacity: 0;
              background-color: grey;
              @apply(--layout-fit);
              z-index: -1;
          }

          .text-block {
            padding-top: 60px;
            float:left;
          }

          .image-block {
            padding: 60px;
            float:right; 
          }

          /* very small mobile screens */
          @media only screen and (max-width: 600px) {
              h2.typed {
                  font-size: 2.56rem !important;
              }
          }
          h5 {
            line-height: 140%;
            font-weight: 300 !important;
            font-size: 1.64rem;
            margin: .82rem 0 .656rem;
          }

          .faqitem {
              margin: 0 auto;
              position: relative;
          }
          .markdown-html a {
              text-decoration: none !important;
              color: #09c !important;
          }
          .markdown-html a {
              text-decoration: none !important;
              color: #09c !important;
          }

          .image-link {
            outline: none;
          }

          .image-link > landing-image::after {
            display: block;
            content: '';
            position: absolute;
            transition-property: opacity;
            transition-duration: 0s;
            transition-delay: 90ms;
            pointer-events: none;
            opacity: 0;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            outline: #2196F3 auto 5px;
            outline: -moz-mac-focusring auto 5px;
            outline: -webkit-focus-ring-color auto 5px;
          }

          .image-link:focus > landing-image::after {
            opacity: 1;
          }

          landing-image {
            position: relative;
            height: 1020px;
            overflow: hidden;
            --landing-image-img: {
              position: absolute;
              top: 0;
              bottom: 0;
              left: -9999px;
              right: -9999px;
              max-width: none;
            };
            margin-top: 40px;
          }    

          @media (max-width: 767px) {
            landing-image {
              height: 240px;
            }

            h2 {
              margin: 24px 0;
            }
          } 
        </style>

        <div class="container">
            <div class="xs12 s6 m6 l6 text-block">
                <h4>How it works</h4>
                <p>[[contents.p1]]</p>
                <p>[[contents.p2]]</p>
                <p>[[contents.p3]]</p>
            </div>
            <div class="xs12 s6 m6 l6 image-block">
              <img class="with-shadow" src="[[contents.image]]"/>
            </div>
        </div>

    </template>
    <script>
    Polymer({
        is: 'landing-how-it-works',
        properties: {
            contents: {
                type: Array,
                notify: true
            }
        }
    });
    </script>
</dom-module>